<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Input</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>
<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Input</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">
        <ion-list>
          <ion-item>
            <ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Default Label</ion-label>
            <ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Clear Input</ion-label>
            <ion-input clear-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label floating>Floating</ion-label>
            <ion-input checked></ion-input>
          </ion-item>

          <ion-item>
            <ion-label fixed>Type #</ion-label>
            <ion-input type="number" value="333"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label stacked>Password</ion-label>
            <ion-input type="password"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label stacked>Placeholder</ion-label>
            <ion-input placeholder="Enter Something"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Disabled</ion-label>
            <ion-input id="dynamicDisabled" value="Disabled" disabled></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Readonly</ion-label>
            <ion-input id="dynamicReadonly" value="Readonly" readonly></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Slot</ion-label>
            <ion-input slot="start" value="Start"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Toggle</ion-label>
            <ion-toggle checked slot="end"></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label fixed>Type #</ion-label>
            <div type="number" value="333" class="input input-md hydrated"><!----><input aria-disabled="false" autocapitalize="none" autocomplete="off" autocorrect="off" autofocus="false" class="native-input native-input-md" spellcheck="false" type="number"><button type="button" class="input-clear-icon" hidden=""></button></div>
          </ion-item>
        </ion-list>

        <div text-center>
          <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
            Toggle Disabled
          </ion-button>

          <ion-button color="secondary" onclick="toggleBoolean('dynamicReadonly', 'readonly')">
            Toggle Readonly
          </ion-button>
        </div>

        <ion-item>
          <ion-label>Clear Input</ion-label>
          <ion-input clear-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
        </ion-item>

      </ion-content>

    <script>
      function toggleBoolean(id, prop) {
        var el = document.getElementById(id);

        var isTrue = el[prop] ? false : true;
        el[prop] = isTrue;
        console.log('in toggleBoolean, setting', prop, 'to', isTrue);
      }
    </script>
  </ion-app>
</body>
</html>



